<script setup lang="ts">
    import { defineAsyncComponent,reactive,ref,toRefs } from 'vue';
    import base from "@/utils/base";
    import { uploadImg } from '@/api/common/media';
    import request from "@/utils/request";
    import {notify} from '@/utils/element'
    import { Session } from '@/utils/storage';
    const Editor=defineAsyncComponent(()=>import('@/components/editor/index.vue'));
    const formRef=ref();
    const state=reactive({
        loadding:false,//加载框
        visible:false,//隐藏显示
        formData:{} as any,
                                                                                                                                        yonghuxingbieOptions: [],
                                                title:'注册',
        tableName:''
    })
    const initData={

    }
    const {
        loadding,
        visible,
        formData,
        title,
        tableName,
                                                                                                                                     yonghuxingbieOptions,
                                                } = {...toRefs(state)};


    function open(tableName:string){

        state.tableName=tableName;
        state.visible=true;
    }


    const emit = defineEmits(['refresh']);

    const close=()=>{
        state.visible=false;
    }

    function submitForm(){
        formRef.value?.validate((valid:boolean)=>{

            if(!valid) return;
            state.loadding=true;
            request({
                url:`${state.tableName}/register`,
                method:'post',
                data:state.formData
            }).then(({data})=>{
                notify("注册成功",{type:'success'});
            state.loadding=false;
            close();

        })



        })

    }

    defineExpose({
        open
    })


                
               
               
               
               
                                               state.yonghuxingbieOptions= "男,女".split(',')
                            
               
   
        


</script>

<template>
    <el-dialog :title="智能维保合同管理系统注册" v-model="visible"
               center draggable :before-close="close" width="1000px"
               :close-on-click-modal="false" destroy-on-close>
        <div v-loading="loadding">
            <el-form ref="formRef" :model="formData"
                     label-width="85px" label-right="right"
                     label-suffix=":" status-icon
            >
                                                                                                                                
                        <el-form-item  v-if="tableName=='yonghu'" label="用户账号" prop="yonghuzhanghao" :rules="{required: true, message: '用户账号为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.yonghuzhanghao" maxlength="30" clearable show-word-limit placeholder="请输入用户账号" />
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item  v-if="tableName=='yonghu'" label="密码" prop="mima" :rules="{required: true, message: '密码为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.mima" maxlength="30" clearable show-word-limit placeholder="请输入密码" />
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item  v-if="tableName=='yonghu'" label="联系方式" prop="lianxifangshi" :rules="{required: true, message: '联系方式为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.lianxifangshi" maxlength="30" clearable show-word-limit placeholder="请输入联系方式" />
                        </el-form-item>
                                                                                                                        

                                                                                <el-form-item  v-if="tableName=='yonghu'" label="用户性别" prop="yonghuxingbie" :rules="{required: true, message: '用户性别为必选项！', trigger: 'blur'}">
                            <el-select
                                    v-model="formData.yonghuxingbie"
                                    clearable
                                    placeholder="请选择用户性别"
                                    style="width: 240px"
                            >
                                <el-option
                                        v-for="(item,index) in yonghuxingbieOptions"
                                        v-bind:key="index"
                                        :label="item"
                                        :value="item"
                                />
                            </el-select>
                        </el-form-item>

                                                        
                        <el-form-item  v-if="tableName=='yonghu'" label="用户姓名" prop="yonghuxingming" :rules="{required: true, message: '用户姓名为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.yonghuxingming" maxlength="30" clearable show-word-limit placeholder="请输入用户姓名" />
                        </el-form-item>
                                                                                                                        

                                         


            </el-form>
            <el-row justify="center" class="mt10">
                <el-button @click="close">取 消</el-button>
                <el-button @click="submitForm" type="primary">保 存</el-button>
            </el-row>
        </div>
    </el-dialog>
</template>

<style lang="scss" scoped>
    .avatar-uploader{
        border:1px solid #e4e6e9
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>